<template>
  <div class="box">
    <p class="title">文章详情</p>
    <el-table :data="list" border style="width:100%; border-top:1px solid #ebeef5">
      <el-table-column prop="key" label="标题" width="180"></el-table-column>
      <el-table-column prop="value" label="内容">
        <template slot-scope="props">
          <div class="all-flex-center-start" v-if="props.row.key === '媒体展示'">
            <div class="img-box" :style="'background-image:url(' + item.src + ')'" v-for="item in props.row.value">
            </div>
          </div>
          <div id="editor" v-else-if="props.row.key === '内容'"></div>
          <span v-else>{{props.row.value}}</span>
        </template>
      </el-table-column>
    </el-table>
    <p style="margin-top:30px; text-align:center">
      <el-button @click="$router.back()">返回</el-button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      detailKey: {
        articleID: "ID",
        title: "标题",
        type: "类型",
        author: "作者",
        price: "价格",
        media: "媒体展示",
        sort: "顺序",
        content: "内容"
      }
    }
  },
  created() {
    //获取详情操作
    const articleID = this.$route.query.articleID;
    const _this = this;
    this.$ajax({
      url: "article/getArticleDetail",
      data: {
        app: {
          articleID
        }
      },
      perfect(con) {
        for (let key in con) {
          if (con[key].constructor === Object && con[key]) {
            for (let name in con[key]) {
              let obj = {};
              obj.key = _this.detailKey[name];
              obj.value = con[key][name];
              _this.list.push(obj);
            }
            continue;
          } 
          let obj = {};
          obj.key = _this.detailKey[key];
          obj.value = con[key];
          _this.list.push(obj);
          if (key === "content") {
            let E = require('wangeditor');
            //加载富文本编辑器
            _this.$nextTick(() => {
              let editor = new E("#editor");
              editor.customConfig.menus = [];
              editor.create();
              editor = editor;
              editor.txt.html(con[key]);
            });
          }
        }
      }
    });
  }
};
</script>

<style scoped>
.title {
  padding: 20px 0;
  font-size: 20px;
  text-align: center;
}
.img-box {
  width: 100px;
  height: 100px;
  background-position: center;
  background-size: cover;
  margin-right: 10px
}
</style>
